<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <el-row class="header navbar bg-white shadow">
        <!--时间日期-->
        <div class="btn-group tool-button mt5">
            <el-date-picker
                    v-model="searchDate"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    size="medium"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
        </div>
        <!--按赛事阶段搜索-->
        <div class="btn-group tool-button mt5">
            <el-select v-model="pageForm.stage" placeholder="请选择赛事阶段"
                       size="medium"
            >
                <el-option
                        v-for="item in matchStageOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>
        </div>
        <!--按联赛或主、客队搜索-->
        <div class="btn-group tool-button mt5">
            <el-input v-model="pageForm.searchKeyword" @keyup.enter.native="doSearch"
                      placeholder="联赛、主队、客队、mid" size="medium"></el-input>
        </div>
        <!--搜索按钮-->
        <div class="btn-group tool-button mt5">
            <el-button slot="append" icon="el-icon-search" @click="doSearch" size="medium"></el-button>
        </div>
    </el-row>
    <el-row class="el-table-container">
        <el-table
                :data="tableData"
                size="small"
                header-align="center"
                style="width: 100%"

        >
            <el-table-column
                    prop="mid"
                    label="mid"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="league"
                    label="所属联赛"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="主队"
                    prop="home"
                    header-align="center"
                    :show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="custom"
                    label="客队"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    sortable
                    label="阶段"
                    header-align="center"
                    align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.stage=='future'">明日</span>
                    <span v-else-if="scope.row.stage=='browse'">今日</span>
                    <span v-else-if="scope.row.stage=='finished'">已结束</span>
                    <span v-else-if="scope.row.stage=='other'">赛事异常</span>
                </template>
            </el-table-column>
            <el-table-column
                    sortable
                    prop="dateTime"
                    label="时间(美东)"
                    header-align="center"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120"
                    align="center">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini">
                            <i class="ti-settings"></i>
                            <span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided
                                              :command="{type:'edit',id:scope.row.id}">
                                <span v-if="scope.row.stage in {'finished':'','other':''}">查看利率</span>
                                <span v-else>修改利率</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--分页容器-->
    <el-row class="el-pagination-container">
        <el-pagination
                @size-change="pageSizeChange"
                @current-change="pageNumberChange"
                :current-page="pageForm.pageNumber"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.totalCount">
        </el-pagination>
    </el-row>

    <!--修改利率弹出窗-->
    <el-dialog
            title="详情"
            :visible.sync="editDialogVisible"
            :close-on-click-modal="false"
            width="50%">
        <div style="line-height: 40px; margin-bottom: 10px">
            <div>{{formData.home}} <span style="font-weight: bold;font-size: large"> VS </span> {{formData.custom}}
            </div>
            <div>{{formData.dateTime}}(美东时间)</div>
            投资类型：
            <el-select v-model="betDefaultType" placeholder="投资类型" size="medium" @change="changeTableStage">
                <el-option v-for="item in betTypes"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value"
                ></el-option>
            </el-select>
            <div class="pull-right" style="margin-right: 5%;">
                <el-switch
                        v-model="formData.protect"
                        active-text="保本"
                        active-color="#13ce66"
                        inactive-color="#909399">
                </el-switch>
            </div>
        </div>
        <!--投资内容渲染-->
        <el-table
                ref="multipleTable"
                :data="betsData"
                tooltip-effect="dark"
                style="width: 100%">
            <!-- 勾选框 -->
            <el-table-column
                    type="selection"
                    :selectable="() => false"
                    width="55">
            </el-table-column>
            <!-- 投资内容 0-0、1-1... -->
            <el-table-column
                    align="center"
                    prop="betContent"
                    label="投资内容">
            </el-table-column>
            <!-- 利率 -->
            <el-table-column
                    prop="rate"
                    align="center"
                    label='利率'>
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.rate"
                                     size="small"
                                     @change="changeBet(scope.row)"
                                     :min="0" :max="99" label="利率(百分之)"></el-input-number>
                </template>
            </el-table-column>
            <!-- 已完成金额 -->
            <el-table-column
                    prop="completedAmount"
                    align="center"
                    label='已完成金额'>
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.completedAmount"
                                     size="small"
                                     @change="changeBet(scope.row)"
                                     :min="0" label="招募金额"></el-input-number>
                </template>
            </el-table-column>
            <!-- 招募金额 -->
            <el-table-column
                    prop="recruitAmount"
                    align="center"
                    label='招募金额'>
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.recruitAmount"
                                     size="small"
                                     @change="changeBet(scope.row)"
                                     :min="0" label="招募金额"></el-input-number>
                </template>
            </el-table-column>
            <!-- 是否保本 -->
            <el-table-column
                    prop="protect"
                    align="center"
                    label='是否保本'>
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.protect"
                            @change="changeBet(scope.row)"
                            active-color="#13ce66"
                            inactive-color="#909399">
                    </el-switch>
                </template>
            </el-table-column>
            <!-- 是否自动更新 -->
            <el-table-column
                    prop="rateUpdateFlag"
                    align="center"
                    label='是否自动更新'>
                <template slot-scope="scope">
                    <i v-if="scope.row.rateUpdateFlag" class="fa fa-circle text-success ml5"></i>
                    <i v-else class="fa fa-circle text-danger ml5"></i>
                </template>
            </el-table-column>
        </el-table>

        <!--        确认/取消 提交修改按钮-->
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" v-if="!(formData.stage in {'finished':'','other':''})" @click="doEdit">提 交</el-button>
            <el-button type="primary" @click="editDialogVisible = false">关 闭</el-button>
        </span>
    </el-dialog>


</div>
<script src="${base!}/assets/platform/js/sha256.js"></script>
<script>
    new Vue({
        el: "#app",
        data: function () {
            var self = this;
            return {
                matchStageOptions: [{
                    value: '',
                    label: '赛事阶段'
                }, {
                    value: 'browse',
                    label: '今日'
                }, {
                    value: 'future',
                    label: '明日'
                }, {
                    value: 'finished',
                    label: '已结束'
                }, {
                    value: 'other',
                    label: '赛事异常'
                }],
                pickerOptions: {
                    disabledDate: function (time) {
                        return time.getTime() > new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000);
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'weeks').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-3, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                searchDate: [],
                addDialogVisible: false,
                editDialogVisible: false,
                tableData: [],
                pageForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    totalCount: 0,
                    searchDate: "",
                    matchType: "",
                    stage: "",
                },
                formData: {
                    id: "",
                    custom: "",
                    dateTime: "",
                    haveHomeCourt: "",
                    haveRoll: "",
                    home: "",
                    league: "",
                    mid: "",
                    opAt: "",
                    stage: "",
                    start: "",
                    protect: false,
                    bets: [],
                },
                // 打开修改利率窗口默认显示的是‘全场波胆’
                betDefaultType: "Full Time",
                betTypes: [],
                betsData: [],
                betsDataClone: [],
                hasChangedFlag: false,
            }
        },
        methods: {
            pageNumberChange: function (val) {//页码更新操作
                this.pageForm.pageNumber = val;
                this.pageData();
            },
            pageSizeChange: function (val) {//分页大小更新操作
                this.pageForm.pageSize = val;
                this.pageData();
            },
            pageData: function () {//加载分页数据
                var self = this;
                sublime.showLoadingbar();//显示loading
                if (self.searchDate) {
                    self.pageForm.searchDate = self.searchDate.toString();
                } else {
                    self.pageForm.searchDate = "";
                }
                self.pageForm.start = self.pageForm.searchDate.split(',')[0];
                self.pageForm.end = self.pageForm.searchDate.split(',')[1];
                $.post(base + "/platform/crown/bet/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code === 0) {
                        self.tableData = data.data.list;
                        self.pageForm.totalCount = data.data.totalCount;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            betTypeList: function () {
                let self = this;
                $.post(base + "/platform/crown/bet/betTypes", function (data) {
                    if (data.code === 0) {
                        self.betTypes = data.data;
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json")
            },
            // bet类型枚举 转换成英文 HALF_PD -> Half Time
            formatBetType: function (val) {
                let self = this;
                let format = self.betDefaultType;
                for (let i = 0; i < self.betTypes.length; i++) {
                    if (self.betTypes[i].value === val) {
                        format = self.betTypes[i].name;
                        break;
                    }
                }
                return format;
            },
            doSearch: function () {
                this.pageForm.pageNumber = 1;
                this.pageData();
            },
            // 修改利率弹窗
            dropdownCommand: function (command) {
                var self = this;
                let betType = command.betType ? command.betType : self.betTypes[0].value;
                $.post(base + "/platform/crown/bet/edit?matchId=" + command.id + "&betType=" + betType, function (data) {
                    if (data.code === 0) {
                        self.formData = data.data;
                        self.betsData = data.data.bets;
                        self.betDefaultType = self.formatBetType(command.betType);
                        // 存betsData的快照
                        self.betsDataClone = JSON.parse(JSON.stringify(self.betsData));
                        self.editDialogVisible = true;// 打开编辑窗口
                    } else {
                        self.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                }, "json");
            },
            // 切换betType事件
            changeTableStage: function (e) {
                let self = this;
                let command = {
                    "id" : self.formData.id,
                    "betType" : e,
                };
                self.dropdownCommand(command);
            },
            // bet表单中的值改变勾选该行
            changeBet: function (e) {
                let self = this;
                // 将改变后的数据与改变前的对比，如果不同则勾选改行，如果相同则不勾选
                for (let i = 0; i < self.betsDataClone.length; i++) {
                    let item = self.betsDataClone[i];
                    if (item.id === e.id) {
                        self.hasChangedFlag = item.rate !== e.rate
                            || item.completedAmount !== e.completedAmount
                            || item.protect !== e.protect
                            || item.recruitAmount !== e.recruitAmount;
                        // 如果利率改变就停止爬虫自动更新
                        self.$set(e, "rateUpdateFlag", item.rate === e.rate);
                        // 记录betsData中发生改变的值
                        self.$set(e, "hasChanged", self.hasChangedFlag);
                        // 勾选该行
                        this.$refs.multipleTable.toggleRowSelection(e, self.hasChangedFlag);
                        break;
                    }
                }
            },
            // 提交
            doEdit: function () {
                let self = this;
                // 获取betsData中hasChanged为true的值
                let data = JSON.parse(JSON.stringify(self.betsData.filter(item => item.hasChanged)));
                // 增加了‘保本’开关，所以不用再校验数据时候有改变
                // if (data.length === 0) {
                //     self.$message({
                //         message: "没有改变的数据,不能提交",
                //         type: 'error'
                //     });
                //     return;
                // }

                // bets中如果有一个protect为true，则match的protect为true
                self.formData.protect = false;
                for (const item of self.betsData) {
                    if (item.protect) {
                        self.formData.protect = item.protect;
                        break;
                    }
                }
                // data与betsDataClone对比，如果data item某个属性的值与betsDataClone该条目的值相等，则item该属性值置空
                data.forEach(item => {
                    for (let i = 0; i < self.betsDataClone.length; i++) {
                        if (self.betsDataClone[i].id === item.id) {
                            // 对比属性值
                            if (self.betsDataClone[i].rate === item.rate) {
                                item.rate = null;
                            }
                            if (self.betsDataClone[i].completedAmount === item.completedAmount) {
                                item.completedAmount = null;
                            }
                            if (self.betsDataClone[i].recruitAmount === item.recruitAmount) {
                                item.recruitAmount = null;
                            }
                            break;
                        }
                    }
                });

                self.formData.bets = data;
                $.ajax({
                    url: base + "/platform/crown/bet/editDo",
                    type: "POST",
                    data: JSON.stringify(self.formData),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        if (data.code === 0) {
                            self.$message({
                                message: data.msg,
                                type: 'success'
                            });
                            self.doSearch();
                            self.editDialogVisible = false;
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }
                });
            },
        },
        created: function () {
            // bet类型枚举
            this.betTypeList();
            this.pageData();
        }
    });
</script>

<!--#
}
#-->